<template>
	<view>
		<image class="backgroud"  mode="widthFix" src="https://static.wddzq.com/static/renzheng_bg.png"></image>
		<view class="auth-box">
			<view class="title">认证类型</view>
			<view class="auth-types">
				<view class="auth-type-item mr-18" :class="type === 1 ? 'active' : ''" @click="handleTypeClick(1)">
					<image src="https://static.wddzq.com/static/gerenrenzheng-big.png"></image>
					<text>个人认证</text>
				</view>
				<view class="auth-type-item" :class="type === 2 ? 'active' : ''" @click="handleTypeClick(2)">
					<image src="https://static.wddzq.com/static/juleburenzheng-big.png"></image>
					<text>队长认证</text>
				</view>
			</view>
		</view>
		<view v-if="type === 1">
			<view class="form-item">
				<text>*</text><text style="font-size: 28rpx;color: #222;">职业</text>
				<u--input
					class="input-flex"
					border="none"
					placeholder="请输入您的职业"
					inputAlign="right"
					fontSize="24"
					color="#333"
					placeholderStyle="font-size: 24rpx;color: #aaa;"
					:value="personal.jobName"
					@input="handleJobName"
				></u--input>
			</view>
			<view class="form-item-img">
				<view class="title">上传证明</view>
				<view class="sub-title">请上传名片或其他在职证明</view>
				<u-upload
					:fileList="personal.personPicList || []"
					multiple
					:max-count="10"
					:previewFullImage="true"
					@afterRead="handleUpload"
					@delete="handleHeaderDel"
					width="140"
					height="140"
				></u-upload>
			</view>
		</view>
		<view v-else>
			<view class="form-item-img">
				<view class="title">上传队长图片（必填）</view>
				<view class="sub-title">图片800*800px以上，大小不超过5Mb</view>
				<u-upload
					:fileList="club.clubPic || []"
					multiple
					:max-count="1"
					:previewFullImage="true"
					@afterRead="handleClubUpload"
					@delete="handleClubDel"
					width="140"
					height="140"
				></u-upload>
			</view>
			<view class="form-item">
				<text>*</text><text style="font-size: 28rpx;color: #222;">队长名称</text>
				<u--input
					class="input-flex"
					border="none"
					placeholder="请输入队长名称"
					fontSize="24"
					color="#333"
					placeholderStyle="font-size: 24rpx;color: #aaa;"
					inputAlign="right"
					:value="club.clubName"
					@input="handleClubNameChange"
				></u--input>
			</view>
<!--			<view class="form-item" @click="handleChooseLocation">
				<text>*</text><text style="font-size: 28rpx;color: #222;">俱乐部位置</text>
				<u&#45;&#45;input
					class="input-flex"
					border="none"
					placeholder="请输入俱乐部位置"
					fontSize="24"
					color="#333"
					placeholderStyle="font-size: 24rpx;color: #aaa;"
					inputAlign="right"
					:value="club.clubLocationName"
				></u&#45;&#45;input>
			</view>
			<map id="maps" style="width: 100%; height: 300rpx;" :longitude="club.clubLng" :latitude="club.clubLat" scale="16" show-location>
			</map>-->
			<view class="form-item">
				<text>*</text><text style="font-size: 28rpx;color: #222;">联系电话</text>
				<u--input
					class="input-flex"
					border="none"
					placeholder="请输入联系电话"
					fontSize="24"
					color="#333"
					placeholderStyle="font-size: 24rpx;color: #aaa;"
					inputAlign="right"
					:value="club.clubTel"
					@input="handleClubTelChange"
				></u--input>
			</view>
		</view>
	
		<view class="block">
		</view>
		<view class="footer-box">
			<view class="footer">
				<image :src="checked ? 'https://static.wddzq.com/static/check_y.png' : 'https://static.wddzq.com/static/check_b.png'" @click="handleCheckClick"></image>
				<text @click="handleCheckClick">我已阅读并同意</text>
				<text @click="openRenzhenXieYi">《认证协议》</text>
			</view>
			<u-button v-if="checked" class="footer-btn" @click="handleSubmit" customStyle="height: 88rpx;border-radius: 44rpx;" color="#1c1c1e">
				<text v-if="status === 0">提交认证</text>
				<text v-if="status === 1">审核中</text>
				<text v-if="status === 2">更新(认证通过)</text>
				<text v-if="status === 3">更新((不通过))</text>
			</u-button>
			<u-button v-else class="footer-btn" @click="handleSubmit" customStyle="height: 88rpx;border-radius: 44rpx;background-color: #aaa;border: 1rpx solid #aaa;" color="#fff">
				<text v-if="status === 0">提交认证</text>
				<text v-if="status === 1">审核中</text>
				<text v-if="status === 2">更新(认证通过)</text>
				<text v-if="status === 3">更新((不通过))</text>
			</u-button>
		</view>
	</view>
</template>

<script>
	import { to, uploadAfter, checkForm } from '../../config/utils';
	import { personolFieldData, clubFieldData } from '../../config/common.js';
	import { saveUpdateUserAuthentication, getUserAuthentication } from '../../config/api.js';
	
	export default {
		data() {
			return {
				type: 1,
				isUpdated: false,
        status: 0,
				checked: false,
				personal: {
					authenticationType: 1,
					jobName: '',
					personPicList: []
				},
				club: {
					authenticationType: 2,
					clubAddress: "",
					clubLat: 0,
					clubLng: 0,
          clubLocationName: "",
					clubName: "",
					clubPic: [],
					clubTel: "",
					jobName: "",
					remark: ""
				},
				uploadList: [{
					url: ''
				}]
			}
		},
		onReady() {
			this.fetchAuthData();
		},
		methods: {
			handleCheckClick() {
				this.checked = !this.checked;
			},
      openRenzhenXieYi(){
        let actionUrl = "https://mp.weixin.qq.com/s?__biz=MzkwMjUwMDE4Mg==&mid=2247483770&idx=1&sn=0a9961958d0c7da9273cb6fa8b44c47f&chksm=c0a5db43f7d25255f0e758a3c028736a01c865dec4a2c9837c824e5550b00cdc6ade938ce3dc#rd";
        uni.navigateTo({
        url: `/pages/webview/webview?url=` + encodeURIComponent(actionUrl)
        })
      },
			handleTypeClick(type) {
				this.type = type;
			},
			// 职业
			handleJobName(value) {
				this.personal = {
					...this.personal,
					jobName: value
				};
			},
			handleClubNameChange(value) {
				this.club = {
					...this.club,
					clubName: value
				};
			},
			handleClubTelChange(value) {
				this.club = {
					...this.club,
					clubTel: value
				};
			},
			// 选择位置
			handleChooseLocation() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						uni.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
							success(res) {
								console.log(res);
								that.club = {
									...that.club,
									clubLat: res.latitude,
									clubLng: res.longitude,
									clubAddress: res.address,
                  clubLocationName: res.name
								};
							},
							fail(e) {
								console.log(e);
							}
						})
					},
					fail(e) {
						console.log(e);
					}
				});
			
			},
			async fetchAuthData() {
				const [err, data] = await to(getUserAuthentication());
				if(err) {
					return uni.showToast({
						title: err?.msg || '获取认证信息失败',
					})
				}
				if(data.success && data.data){
					const { authenticationType,status } = data.data || {};
					if(!authenticationType) return;
					this.type = authenticationType;
					this.status = status;
					this.isUpdated = true;
					if(authenticationType === 1) {
						const { personPicList, jobName, } = data.data || {};
						this.personal = {
							authenticationType,
							jobName,
							personPicList: (personPicList?.split('|') || []).map(item => ({ url: item }))
						};
					} else if(authenticationType === 2)  {
						const {
							authenticationType, clubAddress, clubLat,
							clubLng, clubLocationName, clubName, clubPic,
							clubTel, jobName, remark, id, userId } = data.data || {};
						this.club = {
							authenticationType, clubAddress, clubLat,
							clubLng, clubLocationName, clubName,
							clubPic: (clubPic?.split('|') || []).map(item => ({ url: item })),
							clubTel, jobName, remark, id, userId
						};
					}
				} else {
					uni.showToast({
						title: data?.msg || '获取认证信息失败'
					})
				}
			},
			async handleUpload(file) {
				const fileData = await uploadAfter(file.file);
				console.log(fileData);
			
				let fileList = fileData?.filter(item => item.url);
				
				this.personal = {
					...this.personal,
					personPicList: this.personal.personPicList.concat(fileList)
				};
			},
			handleHeaderDel(e) {
				const { index } = e;
				let fileList = [...this.personal.personPicList];
				fileList.splice(index, 1);
			
				this.personal = {
					...this.personal,
					personPicList: fileList
				};
			},
			async handleClubUpload(file) {
				const fileData = await uploadAfter(file.file);
				console.log(fileData);
			
				let fileList = fileData?.filter(item => item.url);
				
				this.club = {
					...this.club,
					clubPic: (this.club.clubPic || []).concat(fileList)
				};
			},
			handleClubDel(e) {
				const { index } = e;
				let fileList = [...this.club.clubPic];
				fileList.splice(index, 1);
				console.log(fileList);
			
				this.club = {
					...this.club,
					clubPic: fileList
				};
			},
			async handleSubmit() {
				if(!this.checked) {
					return uni.showToast({
						title: '请先勾选会员认证协议',
						icon: 'none'
					})
				}
				
			  if(this.status === 1){
          return uni.showToast({
            title: "后台审核中，关注[清醺局]公众号，可收到审核通知",
            icon: "none"
          })
        }
				let params = {};
				let msg = false;
				if(this.type === 1) {
					params = {...this.personal};
					params.personPicList = this.personal.personPicList.map(item => item.url).join(',');
					
					msg = checkForm(personolFieldData, params);
				} else {
					params = {...this.club};
					params.clubPic = this.club.clubPic?.map(item => item.url).join(',');
					msg = checkForm(clubFieldData, params);
				}
				if(msg) {
					return uni.showToast({
						title: msg,
						icon: 'none'
					})
				}
				
				let [err, data] = await to(saveUpdateUserAuthentication(params));
				if(err) {
					return uni.showToast({
						title: err?.msg || '认证失败',
						icon: "none"
					})
				}
				if(data.success) {
					uni.showToast({
						title: '关注公众号，接受审核通知'
					});
					this.fetchAuthData();
				}
				uni.showToast({
					title: data?.msg || '认证失败',
					icon: "none"
				})
			},
		}
	}
</script>

<style>
.backgroud {
	/*height: 680rpx;*/
  width: 100%;
}
.auth-box {
	position: relative;
	background-color: #fff;
	border-radius: 20rpx;
	margin: 0 24rpx;
	margin-top: -210rpx;
	padding: 32rpx 18rpx;
}
.title {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 24rpx;
}
.mr-18 {
	margin-right: 18rpx;
}
.auth-types {
	display: flex;
}
.auth-type-item {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	height: 136rpx;
	background-color: #f2f2f2;
	border-radius: 18rpx;
}
.auth-type-item.active {
	background-color: #ffb803;
}
.auth-type-item image {
	width: 62rpx;
	height: 62rpx;
	margin-right: 18rpx;
}
.auth-type-item text {
	font-size: 32rpx;
	color: #000;
}

.form-item {
	background-color: #fff;
	display: flex;
	align-items: center;
	margin: 0 24rpx;
	margin-top: 18rpx;
	height: 100rpx;
	border-radius: 18rpx;
	padding: 0 18rpx;
}

.form-item-img {
	flex-direction: column;
	align-items: flex-start;
	background-color: #fff;
	margin: 0 24rpx;
	margin-top: 18rpx;
	padding: 32rpx 18rpx;
	border-radius: 18rpx;
}

.form-item text:first-child {
	font-size: 28rpx;
	color: #f70000;
	margin-right: 10rpx;
}
.form-item text:last-child {
	font-size: 28rpx;
	color: #222;
}

.form-item-img .sub-title {
	font-size: 24rpx;
	color: #ff6830;
	margin-bottom: 24rpx;
}

.block {
	height: 225rpx;
}
.footer-box {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 26rpx 24rpx;
	background-color: #fff;
	box-shadow: 0rpx -4rpx 4rpx 0rpx rgba(0,0,0,0.02);
	box-sizing: border-box;
	z-index: 100;
}
.footer {
	display: flex;
	align-items: center;
	margin-bottom: 24rpx;
}
.footer image {
	width: 36rpx;
	height: 36rpx;
	margin-right: 12rpx;
}
.footer text {
	font-size: 28rpx;
	color: #000;
}
.footer text:last-child {
	font-size: 28rpx;
	color: #0074fc;
}

.input-flex {
	flex: 1;
}
</style>
